<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../util/bootstrap-3.3.7-dist/css/bootstrap.css">

</head>
<link rel="stylesheet" href="../css/root.css">
<body>




<div class="root-box">
<header>
    <div class='root-title'>
        权限管理
    </div>
</header>
<section class="root-content-box clearfix">


<div class="tab-box">


    <table width="100%" id="root-tab">
        <tr>
            <td colspan="7" class="tab-title-box" style="border: none">
                <div class="tab-title-logo">
                    <span class="glyphicon glyphicon-lock"></span>
                    <p >
                        权限信息
                    </p>
                </div>
               
                
                <div class="tab-title-search">
                    <input type="search" placeholder=" 搜索信息" id="searchInput">
                    <span class="glyphicon glyphicon-search"></span>
                </div>

                <div class="root-addUser">
                     <button style="color: #818181">
                         添加账户
                     </button>
                </div>

            </td>
        </tr>
        <tr>
            <th width="10%"></th>
            <th>姓名</th>
            <th>权限</th>
            <th>账号</th>
            <th>密码</th>
            <th width="30%"></th>
            <th>信息更改与权限设置</th>
        </tr>
        <tbody id="tabContent">


        </tbody>


    </table>
</div>
    <br>
<div class="check-box">
    <button id="checkAllBtn" class="btn btn-default">
        全选
    </button>
    <button id='InvertBtn' class="btn btn-default">
        反选
    </button>
    <button type="button"  class="btn btn-default" data-toggle="modal" data-target="#myModal">
        删除
    </button>
</div>
<div class="page-box">
    <nav aria-label="Page navigation" class="footer-nav">
        <ul class="pagination nav-ul page-ul"  style="margin: 0">
            <li>
                <a href="#" aria-label="Previous" class="nav-ul" id="prevPage">
                    <span aria-hidden="true">«</span>
                </a>
            </li>

                <li id="myPageBox"></li>


            <li >
                <a href="#" aria-label="Next" class="nav-ul" id="nextPage">
                    <span aria-hidden="true" >»</span>
                </a>
            </li>
        </ul>
    </nav>
</div>
</section>
</div>
<div class="zdc">

</div>
<div class="alert-addUser">
    <h1>添加账户</h1>
    <label>姓名:<input type="text" id="addName"></label>
    <label>账号:<input type="text" id="addUserName"></label>
    <label>密码:<input type="text" id="addPassword"></label>
    <label>
        权限:
        <select id="addRoot">
            <option>高级权限</option>
            <option>普通权限</option>
        </select>
    </label>
    <br>
    <button class=" btn btn-default submitAdd ">
        确认并添加
    </button>
    <div class="alert-addUser-exit">
        <span class="glyphicon glyphicon-remove"></span>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">

                <h4>警告</h4>
            </div>
            <div class="modal-body">
                是否删除选中的信息?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-default" data-dismiss="modal" id="delBtn">确定</button>

            </div>
        </div>
    </div>
</div>
<div id="myAlertEle">

</div>
<div id="mySetAlertEle">
    <h1>信息设置</h1>
    <label>姓名:<input type="text" id="setName"></label>
    <label>账号:<input type="text" id="setUsername"></label>
    <label>密码:<input type="text" id="setPassword"></label>
    <label>
        权限:
        <select id="setRoot">
            <option>高级权限</option>
            <option>普通权限</option>
        </select>
    </label>
    <div>
        <b>给予更多权限(高级权限拥有所有权限):</b>
        <br>
        公告:<input type="checkbox" id="gg" value="公告">
        教员:<input type="checkbox" id="jy" value="教员">
        班级:<input type="checkbox" id="bj" value="班级">
        学生:<input type="checkbox" id="xs" value="学生">

        部门:<input type="checkbox" id="bm" value="部门">
    </div>
    <br>
    <button class=" btn btn-default submitSet ">
        确认并设置
    </button>
    <div class="alert-setUser-exit">
        <span class="glyphicon glyphicon-remove"></span>
    </div>
</div>
<script src="../util/jquery-3.4.1.js"></script>
<script src="../util/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="../js/root.js">

</script>
</body>
</html>
